<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head></head>
<body>
	<div th:fragment="content">
		<div class="row">
	   	<div class="col-xs-12">
	          <div class="box">
	          	<div class="box-header">
	          	  <!-- 按钮组 -->
	              <div class="btn-group operation">
					  <button id="btn_add" type="button" class="btn bg-primary">
					    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
					  </button>
					  <button id="btn_edit" type="button" class="btn bg-info">
					    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
					  </button>
					  <button id="btn_delete" type="button" class="btn btn-success">
					    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
					  </button>
				  </div>
				  <!-- end 按钮组 -->
	            </div>            
	            <div class="box-body">
					<table id="users" class="table table-bordered table-striped">
		                <thead>
		                <tr>
		                  <th>用户编号</th>
		                  <th>用户名称</th>
		                  <th>用户昵称</th>
		                  <th>最后登录时间</th>
		                  <th>角色</th>
		                  <th>状态</th>
		                </tr>
		                </thead>
		            </table>
	            </div>
	          </div>
	    </div>
	</div>
		<script th:inline="none">
		$(function () {
			//表格配置项
			var option = {
			   'ajax'        : "user/list",
			   'paging'      : true,
			   'lengthChange': true,
			   'searching'   : true,
			   'info'        : true,
			   'sort'        : true,
			   "language"	 : {
			   		"lengthMenu"		: "每页显示 _MENU_ 条记录",
			   		"zeroRecords"		: "无记录",
			   		"info"				: "共_PAGES_页,当前页_PAGE_",
			   		"infoEmpty"			: "无记录可用",
			        "infoFiltered"		: "(从_MAX_记录中筛选的结果)",
			        "sSearch"			: "查询",
			        "sProcessing"		: "查询中",
			        "sLoadingRecords"	: "加载中...",
			        "oPaginate": {				
						"sFirst"	: "第一页",
						"sLast"		: "最后一页",
						"sNext"		: "下一页",
						"sPrevious"	: "前一页"
					},
		        },
		        "iDisplayLength": 4,
		        "lengthMenu": [[4, 8, 16, -1], [4, 8, 16, "All"]],        
		     	};
		  
		  	//初始化表格
		  	var table = $('#users').DataTable(option)
		  
		  	//绑定表格选择行事件
			$('#users tbody').on( 'click', 'tr', function () {
		         	if ( $(this).hasClass('selected') ) {
		             	$(this).removeClass('selected');
		         	}
		         	else {
		             	table.$('tr.selected').removeClass('selected');
		             	$(this).addClass('selected');
		         	}
		   	});
		  	
		  	$.getJSON(
				'role/list',		
				function(result){
					$("#sel_add_roles")[0].options.length=0;
					$("#sel_edit_roles")[0].options.length=0;
					$.each(result.data, function(index,element){				
						el = "<option value="+element[0]+">"+element[1]+"<option>";
						$("#sel_add_roles").append(el);
						$("#sel_edit_roles").append(el);
					});	
				}		
			)
		  
			//绑定添加按钮事件
			$('#btn_add').click( function () {
			 	$('#modal-add').modal()
			});
		  
			//绑定编辑按钮事件
			$('#btn_edit').click( function () {
				var uid;
				try{
				 	uid = table.row('.selected').data()[0];
				}catch(err){
				 	return;
				}
				    
				$.getJSON(
					'user/get/'+uid, //Restful 风格的URL
					//{'uid':uid},
					function(data){
						$("#uname").val(data.uname);
						$("#uid").val(data.uid);
						$("#alias").val(data.alias);
						$("#logo").val(data.logo);
						$("#passwd").val(data.passwd);
						$("#status").val(data.status);
						$("#sel_edit_roles").val(data.rid);
						$("#last_login_time").val(data.last_login_time);
						$('#modal-edit').modal()
					}		
				)
			});
		  	//绑定删除按钮事件
		  	$('#btn_delete').click( function () {
			  	var uid;
				try{
				 	uid = table.row('.selected').data()[0];
				}catch(err){
				 	return;
				}
			    if(!confirm('确认删除吗?')){
			    	return;
			    }
			    $.post(
		    		'user/delete', 
		    		{'uid':uid},
		            function (obj) {
			            if (obj.Status == 'ok') {
			                table.ajax.reload()
			            } else {
			                alert(obj.msg);
			            }
		            }, 
		            'json'
		        );
			    
		  	});
		  
		  	//添加用户
		  	$('#btn_save').click( function () {  		
		  		var selValue=$("#sel_add_roles").val();
		  		if(selValue==null||selValue==undefined||selValue==""){
		  			alert('请选择角色');
		  			return;
		  		}  		
			    var data = $('#add_form').serialize();
			    $.post(
			    		'user/add', 
			    		data,
		                function (obj) {
		                    if (obj.Status == 'ok') {
		                        table.ajax.reload();
		                        $('#modal-add').modal('hide');
		                    } else {
		                        alert(obj.msg);
		                    }
		                }, 
		                'json'
		        );
		  	});
		  
		  	//修改用户
		  	$('#btn_update').click( function () {
			    var data = $('#edit_form').serialize();
			    $.post(
			    		'user/update', 
			    		data,
		                function (obj) {
		                    if (obj.Status == 'ok') {
		                        table.ajax.reload();
		                        $('#modal-edit').modal('hide');
		                    } else {
		                        alert(obj.msg);
		                    }
		                }, 
		                'json'
		        );
		  	});	  
		})  
		</script>
	
		<!-- 添加模态框 -->
		<div class="modal fade" id="modal-add">
		   <div class="modal-dialog">
		     <div class="modal-content">
		       <div class="modal-header">
		         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		           <span aria-hidden="true">&times;</span></button>
		         <h4 class="modal-title">添加用户</h4>
		       </div>
		       <div class="modal-body">
		         <div class="box box-primary">
		            <!-- /.box-header -->
		            <!-- form start -->
		            <form role="form" id="add_form">
		              <div class="box-body">                
		                <div class="form-group">
		                  <input type="text" class="form-control" name="uname" placeholder="用户名">
		                </div>
		                <div class="form-group">
		                  <input type="text" class="form-control" name="alias" placeholder="昵称">
		                </div>
		                <div class="form-group">
		                  <label>角色</label>
		                  <select class="form-control" name="role.rid" id="sel_add_roles">
		                    
		                  </select>
		                </div>                
		              </div>
		              <!-- /.box-body -->
		            </form>
		          </div>
		       </div>
		       <div class="modal-footer">
		         <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
		         <button type="button" class="btn btn-primary" id="btn_save">保存</button>
		       </div>
		     </div>
		     <!-- /.modal-content -->
		   </div>
		   <!-- /.modal-dialog -->
		</div>
		<!-- end 添加模态框 -->
	
		<!-- 编辑模态框 -->
		<div class="modal fade" id="modal-edit">
		   <div class="modal-dialog">
		     <div class="modal-content">
		       <div class="modal-header">
		         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		           <span aria-hidden="true">&times;</span></button>
		         <h4 class="modal-title">修改用户</h4>
		       </div>
		       <div class="modal-body">
		         <div class="box box-primary">
		            <!-- /.box-header -->
		            <!-- form start -->
		            <form role="form" id="edit_form">
		              <div class="box-body">                
		                <div class="form-group">
		                  <label>用户名</label>
		                  <input type="hidden" id="uid" name="uid">
		                  <input type="hidden"  id="last_login_time" name="last_login_time">
		                  <input type="text" class="form-control" id="uname" name="uname">
		                </div>
		                <div class="form-group">
		                  <label>昵称</label>
		                  <input type="text" class="form-control" id="alias" name="alias">
		                </div>
		                <div class="form-group">
		                  <label>logo</label>
		                  <input type="text" class="form-control" id="logo" name="logo">
		                </div>
		                <div class="form-group">
		                  <label>密码</label>
		                  <input type="text" class="form-control" id="passwd" name="passwd">
		                </div>
		                <div class="form-group">
		                  <label>角色</label>
		                  <select class="form-control" id="sel_edit_roles" name="role.rid">
		                    
		                  </select>
		                </div>
		                <div class="form-group">
		                  <label>状态</label>
		                  <input type="text" class="form-control"  id="status" name="status">                  
		                </div>                
		              </div>
		              <!-- /.box-body -->
		            </form>
		          </div>
		       </div>
		       <div class="modal-footer">
		         <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
		         <button type="button" class="btn btn-primary" id="btn_update">保存</button>
		       </div>
		     </div>
		     <!-- /.modal-content -->
		   </div>
		   <!-- /.modal-dialog -->
		 </div>
		<!-- end 编辑模态框 -->
	</div>
</body>

